<template>
    <div class="arrayMethod">
      <div>数组对象的拼接：concat</div>
      <div>数组对象的过滤：filter</div>
      <div>数组的删除：pop</div>
      <div>数组对象的映射:map</div>
  
  
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // concat
        arr1: [{
          name: '张三',
          id: 1
        },
        {
          name: '李四',
          id: 1
        }],
        arr2: [{
          name: '关羽',
          id: 3
        },
        {
          name: '张飞',
          id: 4
        }],
        // 过滤 谁不是；刘备阵营的
        arr3: [{
          name: '关羽',
          id: 1
        },
        {
          name: '张飞',
          id: 2
        },
        {
          name: '黄忠',
          id: 3
        },
        {
          name: '于禁',
          id: 4
        }],
        // pop
        arr4: [{
          name: '关羽',
          id: 1
        },
        {
          name: '张飞',
          id: 2
        },
        {
          name: '黄忠',
          id: 3
        },
        {
          name: '于禁',
          id: 4
        }],
        // 映射map
        arr5: [{
          name: '关羽',
          id: 1
        },
        {
          name: '张飞',
          id: 2
        },
        {
          name: '黄忠',
          id: 3
        },
        {
          name: '于禁',
          id: 4
        }],
  
  
  
      }
    },
    methods: {
      getMap(){
        this.arr5 = this.arr5.map(item => {
          return{
            label:item.name,
            value:item.id
  
          }
        })
        console.log(this.arr5);
      },
      getPop() {
        let deleteData = this.arr4.pop()
        // console.log(deleteData, this.arr4);
  
      },
      getconcat() {
        // 用来拼接两个数组 concat
        let arr = this.arr1.concat(this.arr2)
        // console.log(arr);
      },
      // 数组过滤
      getFilter() {
        let arr = this.arr3.filter(item => {
          return item.id !== 4
        })
        // console.log(arr);
      }
  
    },
    created() {
      this.getconcat()
      this.getFilter()
      this.getPop()
      this.getMap()
  
    },
  }
  </script>
  <style scoped></style>